import React ,{useState,useEffect}from 'react'
import { Tabs } from 'react-vant';
import axios from 'axios'
import TaChild from './components/TaChild';
function App() {
  const [data,setData]=useState([])
  const [dataChildren,setDataChildren]=useState([])
  useEffect(()=>{
      axios.get('/list').then(res=>{
        setData(res.data.list)
        setDataChildren(res.data.list[0].children)
        console.log(dataChildren)
      })
      
  },[])
  const setActive = (el) => {
      setDataChildren(data[el].children)
  }
  return (
    <div className="demo-tabs">
      <Tabs active={0} onChange={setActive}>
        {data&&data.map((item,index) => (
          <Tabs.TabPane key={index} title={item.title}>
            <TaChild dataChildren={dataChildren}/>
            
          </Tabs.TabPane>
        ))}
      </Tabs>
    </div>
  )
}

export default App